<!--
 * @Description: 我的工作量
 * @Author: 晋龍
 * @Date: 2023-01-12 19:14:38
 * @LastEditors: 晋龍
 * @LastEditTime: 2023-02-21 21:02:39
-->
<template>
  <div class="main">
    <!-- AppBar导航栏 -->
    <var-app-bar
      title="我的工作量"
      title-position="center"
      color="rgb(244,245,249)"
      text-color="rgb(102,106,119)"
      class="myWorkload"
    >
      <template #left>
        <var-button color="transparent" text-color="rgb(102,106,119)" round text @click="onBack">
          <var-icon name="chevron-left" :size="30" class="myWorkload" />
        </var-button>
      </template>
    </var-app-bar>

    <!-- 个人面板 -->
    <div class="teacher">
      <!-- 头像 -->
      <div class="head">
        <var-image class="img" src="../login/image/indexPage.png" alt="头像" />
      </div>
      <!-- 姓名及标签 -->
      <div class="nameBox">
        <div class="name">{{ user.name }}</div>
        <div class="slot">讲师</div>
      </div>
      <!-- 总课时 -->
      <div class="classBox">
        <div class="classNum">{{ totalClass }}</div>
        <div class="classText">总课时</div>
      </div>
    </div>
    <!-- 课程 -->
    <div class="courseBox" v-for="item in workTime">
      <div class="courseHead">
        <span class="courseTitleLeft">
          <div class="courseTitle">{{item.courseName}}</div>
          <div class="courseSlot">第一次</div>
        </span>
        <span class="courseTitleRight">
          <var-image class="courseImg" src="./image/indexPage.png" alt="课程图片" />
        </span>
      </div>
      <div class="courseContent">
        <div class="courseStyle">
          <span>理论学时：</span>
          <span>{{ item.theoryXs }}</span>
        </div>
        <div class="courseStyle">
          <span>上课班级：</span>
          <span>{{item.grade}}</span>
        </div>
        <div class="courseStyle">
          <span>课时：</span>
          <span>{{ item.theoryKs }}</span>
        </div>
      </div>
      <div class="division"></div>
      <div class="courseContent">
        <div class="courseStyle">
          <span>实验学时：</span>
          <span>{{item.experXs}}</span>
        </div>
        <div class="courseStyle">
          <span>上课班级：</span>
          <span>{{ item.grade }}</span>
        </div>
        <div class="courseStyle">
          <span>课时：</span>
          <span>{{item.experKs}}</span>
        </div>
      </div>
      <div class="courseFooter"><span>总课时：</span> <span>{{item.totalKs}}</span></div>
    </div>

    <!-- 添加工作量 -->
    <var-button
      type="primary"
      round
      class="addWorkload"
      size="large"
      @click="addWorkload"
    >
      <var-icon name="plus" />
    </var-button>
  </div>
</template>

<script setup>
import { reactive, ref,toRaw } from "vue";
import router from "@/router";
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user'
import { workTImeStore } from '@/stores/workload';
const workStore = workTImeStore()
const userStore = useUserStore()
const {workTime } = storeToRefs(workStore)
const {user } = storeToRefs(userStore)
const { workTimeAllGet } = workStore
const { getuser } = userStore
const onBack = () =>  router.push("/teachHome");
getuser()
const addWorkload = () =>{
    router.push({
        path:'/reporting',
        query:{id:toRaw(user.value).id}
  })
}
const totalClass = ref(0)
const workTimeAll = async()=> {
  await workTimeAllGet()
  for(let i = 0; i < workTime.value.length; i++){
    totalClass.value += Number(workTime.value[i].totalKs)
  }
}
workTimeAll()

</script>

<style scoped lang="less">
.main {
  background: rgb(244, 245, 249);
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;

  .myWorkload {
    font-weight: bolder;
    font-size: larger;
  }

  /*个人面板*/
  .teacher {
    height: 15%;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    border-radius: 15px;
    background: rgb(255, 255, 255);

    .head {
      margin: 10px;
      height: 100%;
      width: 25%;
      display: inline;

      .img {
        margin-top: 20px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: inline-block;
      }
    }

    .nameBox {
      margin: 10px;
      width: 35%;
      display: inline-block;

      /* 姓名 */
      .name {
        position: relative;
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 5px;
        display: inline-block;
        width: 100%;
      }

      /* 标签 */
      .slot {
        width: fit-content;
        font-size: medium;
        color: aliceblue;
        display: inline-block;
        padding: 3px 12px 3px 12px;
        border-radius: 25px;
        font-size: 14px;
        text-align: center;
        background: rgb(38, 89, 247);
      }
    }

    .classBox {
      width: 29%;
      display: inline-block;
      margin-right: 10px;

      .classNum {
        float:right;
        width: 100%;
        text-align: right;
        font-size: 24px;
        font-weight: bold;
        display: inline-block;
      }

      .classText {
        float: right;
        width: 100%;
        text-align: right;
        font-style: 14px;
        color: gray;
        display: inline-block;
      }
    }
  }

  /*课程*/
  .courseBox {
    overflow: auto;
    zoom: 1;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    border-radius: 15px;
    background: rgb(255, 255, 255);

    .courseHead {
      .courseTitleLeft {
        float: left;
        .courseTitle {
          font-size: 22px;
          font-weight: bolder;
          color: black;
          padding-top: 20px;
          padding-left: 10px;
        }

        .courseSlot {
          width: fit-content;
          background: rgb(255, 111, 69);
          margin-left: 10px;
          padding-left: 3px;
          padding-right: 3px;
          color: rgb(238, 238, 238);
          margin-top: 5px;
          font-size: 14px;
          margin-bottom: 5px;
        }
      }

      .courseTitleRight {
        float: right;
        .courseImg {
          width: 70px;
          height: 70px;
          margin-top: 10px;
          margin-right: 20px;
          border-radius: 25px;
        }
      }
    }
    .courseContent {
      width: 80%;
      margin-top: 10px;
      margin-left: 10px;
      margin-bottom: 3px;
      float: left;
      color: rgb(163, 163, 163);
      .courseStyle {
        margin-top: 5px;
        margin-bottom: 5px;
        font-weight: bold;
      }
    }
    .division {
      width: 94%;
      height: 3px;
      background: rgb(244, 245, 249);
      float: left;
      margin-left: 3%;
      margin-top: 5px;
    }
    .courseFooter {
      width: 80%;
      margin-bottom: 10px;
      margin-top: 10px;
      float: left;
      margin-left: 10px;
      font-weight: bold;
    }
  }

  /*添加按钮*/
  .addWorkload {
    position: absolute;
    bottom: 30px;
    right: 30px;
    border-radius: 50%;
    font-size: 50px;
  }
}
</style>
